<template>
  <el-card class="recent-orders-card" shadow="hover">
    <template #header>
      <div class="card-header">
        <h3>最近订单</h3>
        <el-button type="primary" link @click="$router.push('/myOrders')">查看全部</el-button>
      </div>
    </template>
    
    <el-table :data="recentOrders.slice(0, 4)" style="width: 100%" v-loading="loading">
      <el-table-column prop="orderNumber" label="订单号" min-width="120" />
      <el-table-column prop="createdAt" label="创建日期" min-width="100">
        <template #default="scope">
          {{ formatDate(scope.row.createdAt) }}
        </template>
      </el-table-column>
      <el-table-column prop="receiverName" label="收件人" min-width="100" />
      <el-table-column prop="orderStatus" label="状态" min-width="100">
        <template #default="scope">
          <el-tag :type="getStatusType(scope.row.orderStatus)">
            {{ getStatusText(scope.row.orderStatus) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column width="100" fixed="right">
        <template #default="scope">
          <el-button type="primary" link @click="viewOrderDetail(scope.row.deliveryOrderId)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    
    <div class="empty-placeholder" v-if="recentOrders.length === 0 && !loading">
      <el-empty description="暂无订单数据"></el-empty>
    </div>
  </el-card>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'

interface Order {
  deliveryOrderId: number
  orderNumber: string
  userId: number
  senderName: string
  senderPhone: string
  senderAddress: string
  receiverName: string
  receiverPhone: string
  receiverAddress: string
  itemVolume: number
  itemWeight: number
  itemType: string
  insuredValue: number
  baseFee: number
  weightFee: number
  serviceFee: number
  insuranceFee: number
  totalFee: number
  remark: string
  delivererId: number | null
  paymentMethod: string
  orderStatus: number
  createdAt: string
  updatedAt: string | null
}

defineProps<{
  recentOrders: Order[]
  loading: boolean
}>()

const router = useRouter()

// 获取状态类型
const getStatusType = (status: number) => {
  const typeMap: Record<number, string> = {
    0: 'primary', // 待揽收
    1: 'info',    // 待发货
    2: 'warning', // 运输中
    3: 'danger',  // 待签收
    4: 'success'  // 已完成
  }
  return typeMap[status] || 'info'
}

// 获取状态文本
const getStatusText = (status: number) => {
  const textMap: Record<number, string> = {
    0: '待揽收',
    1: '待发货',
    2: '运输中',
    3: '待签收',
    4: '已完成'
  }
  return textMap[status] || '未知状态'
}

// 格式化日期
const formatDate = (dateString: string) => {
  const date = new Date(dateString)
  return date.toLocaleDateString('zh-CN')
}

// 查看订单详情
const viewOrderDetail = (deliveryOrderId: number) => {
  router.push(`/order?id=${deliveryOrderId}`)
}
</script>

<style scoped>
.recent-orders-card {
  min-height: 300px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-header h3 {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
}

.empty-placeholder {
  margin: 40px 0;
  display: flex;
  justify-content: center;
}
</style>